<template>
	<el-dialog :title="title+'学生信息'" :visible.sync="dialogFormVisible" @close='onClose'>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="名字" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
			<el-form-item label="年龄" prop="age"><el-input v-model="ruleForm.age"></el-input></el-form-item>
			<el-form-item label="地址" prop="address"><el-input v-model="ruleForm.address"></el-input></el-form-item>
			<el-form-item label="手机" prop="iphone"><el-input v-model="ruleForm.iphone"></el-input></el-form-item>
			<el-form-item label="身份证" prop="userId"><el-input v-model="ruleForm.userId"></el-input></el-form-item>

			<el-form-item label="是否独生" prop="isAlone">
				<el-radio-group v-model="ruleForm.isAlone">
					<el-radio :label="true">独生子女</el-radio>
					<el-radio :label="false">非独生子女</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="接种新馆" prop="isInoculate">
				<el-radio-group v-model="ruleForm.isInoculate">
					<el-radio :label="true">已接种</el-radio>
					<el-radio :label="false">未接种</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="活动区域" prop="account">
				<el-select v-model="ruleForm.account" placeholder="请选择活动区域">
					<el-option label="农村户口" :value="0"></el-option>
					<el-option label="城市户口" :value="1"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
				<el-button @click="dialogFormVisible = false">取消</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
</template>

<script>
	import {mapMutations} from 'vuex'
export default {
	name: 'dialog-page',
	data() {
		return {
			dialogFormVisible: false,
			title:'新增',
			ruleForm: {
				isAlone:true,
				isInoculate:false,
				account:0
			},
			formLabelWidth: '120px',
			rules: {
				name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
				age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
				address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
				iphone: [
					{ required: true, message: '请输入手机号码', trigger: 'blur' },
					{ 
						pattern:  /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
						message: '请输入正确的格式', 
						trigger: 'blur' ,
					}
				],
				userId: [
					{ required: true, message: '请输入身份证', trigger: 'blur' },
					{ 
						pattern:  /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, 
						message: '请输入正确的格式', 
						trigger: 'blur' ,
					},
				]
			}
		};
	},
	methods: {
		...mapMutations(['addTableData','upDateTableData']),
		open(row) {
			console.log(row);
			if(row){
				this.title = '修改'
				this.ruleForm = Object.assign({},row)
			}
			this.dialogFormVisible = true;
		},
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					
					if(this.ruleForm.id){
						this.upDateTableData(this.ruleForm)
					}else{
						this.addTableData(this.ruleForm)
					}
					this.dialogFormVisible = false
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		onClose(){
			console.log('组件呗关闭');
			this.$emit('close')
		}
	}
};
</script>

<style scoped></style>
